<template>
    <div class="tanxin tianjia">
        <span>
            数据列表
        </span>
        <div>
            <el-button @click="ontianjia">添加</el-button>
        </div>
    </div>
    <FlashProductTable @chuanid="chuanid"></FlashProductTable>
    <el-dialog v-model="dialogVisible" title="选择商品" width="50%">
        <span>
            <el-form-item label="">
                <el-input style="width: 300px;" v-model="name" placeholder="商品搜索" class="el-input" type="text">
                    <template #append>
                        <el-button @click="Onclick" :icon="Search" />
                    </template>
                </el-input>
            </el-form-item>
            <el-table @selection-change="onclickcheck" :data="tableData" border style="width: 100%">

                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="编号" width="80" align="center" />
                <el-table-column prop="name" label="商品名称" width="180" align="center" />
                <el-table-column label="货号">
                    <template #default="scope">
                        NO. {{ scope.row.detailTitle }}
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" align="center" />
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                layout="prev, pager, next" :total="pagination.total" v-model:current-page="pagination.pageNum"
                v-model:page-size="pagination.pageSize" />

        </span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="tijiaoann">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" title="提示" width="40%">
        <span>确认提交吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="querenann">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible3" title="编辑秒杀商品信息" width="40%">
        <div style="width: 300px; margin:0 auto;">
            <div style="margin-bottom: 10px; line-height: 20px;"> 商品名称：{{ rows.product.name }}</div>
            <div style="margin-bottom: 10px; line-height: 20px;">货号：NO.{{ rows.product.productSn }} </div>
            <div style="margin-bottom: 10px; line-height: 20px;"> 商品价格：￥{{ rows.product.price }} </div>
            <div style="margin-bottom: 10px; line-height: 20px;" class="tanxin">秒杀价格：
                <el-input style="width: 200px;" v-model="rows.flashPromotionPrice">
                    <template #prepend>￥</template>
                </el-input>

            </div>
            <div style="margin-bottom: 10px; line-height: 20px;">剩余数量：{{ rows.product.stock }}</div>
            <div style="margin-bottom: 10px; line-height: 20px;" class="tanxin">
                秒杀数量：
                <el-input style="width: 200px;" v-model="rows.flashPromotionCount" />
            </div>
            <div style="margin-bottom: 10px; line-height: 20px;" class="tanxin">
                限购数量：
                <el-input style="width: 200px;" v-model="rows.flashPromotionLimit" />
            </div>
            <div style="margin-bottom: 10px; line-height: 20px;" class="tanxin">
                排序：
                <el-input style="width: 200px;" v-model="rows.sort" />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="querenann">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import * as api from '../../request/api'
import useTabel from '../../hooks/useGoods'
import { Search } from '@element-plus/icons-vue'
import FlashProductTable from '../../components/FlashProductTable.vue'
import { ElTable, ElMessage } from 'element-plus'
// 搜索框类容
let name = ref()
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.yxadmin.GProductList,
    {
        keyword: name
    })
// 对话框显示隐藏
let dialogVisible = ref(false)
// 确认按钮 显示隐藏
let dialogVisible2 = ref(false)
let dialogVisible3 = ref(false)

// 添加按钮
let ontianjia = () => {
    iftijiaoandxiugai.value = 1
    dialogVisible.value = true
}
// 搜索按钮
let Onclick = () => {
    getTableData()
}
// 1 新建  2修改  3 删除
let iftijiaoandxiugai = ref()
// 提交
let tijiaoann = () => {
    // PFlashProduct
    dialogVisible2.value = true
}

let flashPromotionId = ref(useRoute().query.flashPromotionId)
let flashPromotionSessionId = ref(useRoute().query.flashPromotionSessionId)
// 确认发起请求的地方
let querenann = async () => {
    // productId: 1317, flashPromotionId: "119", flashPromotionSessionId: "2"
    if (iftijiaoandxiugai.value == 1) {
        await api.yxadmin.PFlashProduct([{ productId: productId.value, flashPromotionId: Number(flashPromotionId.value), flashPromotionSessionId: Number(flashPromotionSessionId.value) }])

    } else if (iftijiaoandxiugai.value == 2) {
        await api.yxadmin.UpdataFlashProduct({ relation: rows.value })
    }
    dialogVisible.value = false
    dialogVisible2.value = false
    dialogVisible3.value = false
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
interface User {
    date: string
    name: string
    address: string
    id: number
}
let productId = ref(0)
console.log(useRoute().query);

let onclickcheck = (val: User[]) => {
    // console.log(flashPromotionSessionId.value, flashPromotionId.value);
    productId.value = Number(val[0].id)
}
interface iii {
    product?: any
    flashPromotionCount?: number
    flashPromotionId?: number
    flashPromotionLimit?: number
    flashPromotionPrice?: number
    flashPromotionSessionId?: number
    id?: number
    productId?: number
    sort?: number
}
let rows: Ref<iii> = ref({})
let chuanid = (row: any) => {
    rows.value = row
    dialogVisible3.value = true
    iftijiaoandxiugai.value = 2
}
</script>

<style scoped lang="scss">
.tianjia {
    margin: 20px;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}
</style>